<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KeyEffect</title>

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- 银日 react-dom 用于支持 react 操作 DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入 bable ,用于 Jsx 转为 Js -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>
<body>
    <div id="test"></div>
</body>
<script type="text/babel">
    class Person extends React.Component{
        state = {
            person:[
                {id:1,name:'xiaoming',age:18},
                {id:2,name:'ligui',age:19},
                {id:3,name:'huangfeng',age:20},
            ]
        }

        add = () => {
            const {person} = this.state
            const per = {id:person.length+1,name:'xiaowang',age:21}
            this.setState({person: [per,...person]})
            console.log(person)
        }


        render(){
            return(
                <div>
                    <h2>展示人员信息</h2>
                    <button onClick={this.add}>天人员小王</button>
                    <h3>低效：利用索引值作为KEY</h3>
                    <ul>
                        {
                            this.state.person.map((personObj,index) => {
                                return <li key={index}>{personObj.name}------{personObj.age} <input type="text"/> </li>
                            })
                        }
                    </ul>
                    <hr/>
                    <h3>高效：利用ID作为KEY（数据唯一标识）</h3>
                    <ul>
                        {
                            this.state.person.map((personObj) => {
                                return <li key={personObj.id}>{personObj.name}------{personObj.age} <input type="text"/> </li>
                            })
                            })
                        }
                    </ul>
                </div>
            )
        }
    }
    ReactDOM.render(<Person/>,document.getElementById('test'))
</script>
</html>